<template>
  <div id="app123">
    <!-- 一级路由占位符:只有layout需要被缓存 -->
    <keep-alive include="layout">
      <router-view />
    </keep-alive>
    <!-- <div ref="box" id="box1" @click="dogName = '死鬼'">{{ dogName }}</div>
    <hr />
    <video2 v-if="isShowVideo" />
    <hr />
    <button @click="clickMe">点我呀</button>
    <button @click="shootThePig">你开枪呀</button>
    <button @click="isShowVideo = false">隐藏video组件</button> -->
  </div>
</template>

<script>
// 负责 统一封装 axios
import axios from 'axios';
import './assets/css/index.css';
// import video2 from '@/views/video2/index.vue';

export default {
  name: 'App',
  components: {},
  data() {
    return {
      isShowVideo: true,
      dogName: 'ruiky',
    };
  },
  methods: {
    shootThePig() {
      this.$destroy();
    },
    sayHi() {
      console.log('method-------');
    },
    clickMe() {
      this.dogName = '大王';
      this.$nextTick(() => {
        console.log('clickMe-> ', this.$refs.box.innerHTML);
      });
    },
  },
  beforeDestroy() {
    console.log('beforeDestroy->', this.dogName);
  },
  destroyed() {
    console.log('destroyed->', this.dogName);
    console.log(this);
  },
  beforeUpdate() {
    // 拿到 div 数据修改之前的 内容
    // console.log('beforeUpdate-> ', this.$refs.box.innerHTML);
  },
  updated() {
    // 拿到 div 数据修改之后的 内容
    // console.log('updated-> ', this.$refs.box.innerHTML);
  },

  beforeMount() {
    // console.log(this.$refs.box);
    // console.log(document.querySelector('#box1'));
    // console.log(this.$refs.box.innerHTML);
  },
  mounted() {
    // console.log(this.$refs.box.innerHTML);
  },
  beforeCreate() {
    // console.dir(this);
    // console.log(this.dogName);
    // this.sayHi();
    // this.created();
  },
  created() {
    axios({
      method: 'get',
      url: '/api', // localhost:8081/api
    }).then((res) => {
      console.log(res);
    });
    // console.log('讨厌，死鬼');
    // console.log(this);
    // console.log(this.dogName);
    // this.sayHi();
  },
};
</script>

<style scoped lang="less">
</style>
